//dom元素获取===============================================================
const list = document.querySelector('.list');
const openModal = document.querySelector('#openModal');
//获取省市县的dom元素
const province = document.querySelector('[name=province]')
const city = document.querySelector('[name=city]')
const area = document.querySelector('[name=area]')

//封装城市 联动函数
async function pCA(url, params, citys) {
    // console.log(pname);
    // 发送请求 获取城市
    const cityArr = await axios({
        url,
        params
    })
    citys.innerHTML = cityArr.data.data.map(item => {
        return `<option value="${item}">${item}</option>`//拼接
    })
}


//学生样式刷新出来===============================================================
// 封装异步函数 名字 listDisplay 渲染页面
async function listDisplay() {
    // debugger
    const studentList = await axios({
        url: "/students",
    })
    // console.log("studentList", studentList);
    //处理返回数据
    list.innerHTML = studentList.data.data.map((item) => {
        // console.log(item);
        //解构数组
        const { id, name, age, gender, city, province, area, hope_salary, salary, group } = item
        //返回拼接字符串
        return `<tr>
        <td>${name}</td>
        <td>${age}</td>
        <td>${gender == 1 ? "女" : "男"}</td>
        <td>${group}</td>
        <td>${hope_salary}</td>
        <td>${salary}</td>
        <td>${province + city + area}</td>
        <td>
        <a href="javascript:;" class="text-success mr-3"><i data-id="${id}" class="bi bi-pen"></i></a>
        <a  href="javascript:;" class="text-danger"><i data-id="${id}" class="bi bi-trash"></i></a>
        </td>
      </tr>`
    }).join("");
    document.querySelector('.total').innerHTML = studentList.data.data.length;
};
//刷新页面，渲染
listDisplay()

// 添加学生信息的功能 openModal 点击事件===============================================================
//实例化 modal 弹窗
const myModle = new bootstrap.Modal(document.querySelector('#modal'))
// 点击添加按钮 开启添加页面 功能实现
openModal.addEventListener('click', async () => {
    myModle.show()//开启弹窗
    document.querySelector('.modal-title').innerHTML = "添加学员";
    await pCA("/api/province", {}, province)
    await pCA("/api/city", { pname: province.value }, city)
    await pCA("/api/area", { pname: province.value, cname: city.value }, area)

    //添加 省 的输入框变化事件---------------------------
    province.addEventListener("change", async () => {
        await pCA("/api/city", { pname: province.value }, city)
        await pCA("/api/area", { pname: province.value, cname: city.value }, area)
        // fuck()
    })

    //添加 市 的输入框变化事件---------------------------
    city.addEventListener("change", async () => {
        await pCA("/api/area", { pname: province.value, cname: city.value }, area)
    })

    //拟态框的 确认按钮---------------------------------------
    if (document.querySelector('.modal-title').innerHTML == "添加学员") {
        document.querySelector('#submit').onclick = async (e) => {
            //---------
            //获取form表单内所有元素
            const data = serialize(document.querySelector('#form'), { hash: true })
            //获取表单内所有元素的值 字符串方法拼接
            for (const key in data) {//判断 是否是 能否转换成数字
                if (!isNaN(+data[key])) {
                    data[key] = +data[key]
                } else {
                    data[key] = data[key]
                }
            }
            console.log(data);
            // 向后台发送请求
            await axios({
                url: `/students`,
                method: "post",
                data
            })
            myModle.hide()//关闭拟态框
            listDisplay()//刷新页面
            form.reset()//重置表单
        };
    }
})

// 删除学生信息的功能  点击事件    【删除】===============================================================
//事件委托
window.addEventListener("load", () => {
    list.addEventListener("click", async (e) => {
        //如果点击的是删除按钮----------------------------------
        if (e.target.classList[1] === "bi-trash") {
            //发出 删除请求
            await axios({
                url: `/students/${e.target.dataset.id}`,
                method: "DELETE",
                data: e.target.dataset.id
            })
            // console.log("delStu", delStu);
            //刷新页面，渲染
            listDisplay()
        };

        // 修改学生信息的功能  点击事件    【修改】===============================================================
        //如果点击的是修改按钮----------------------------------
        const id = +e.target.dataset.id
        // console.log(myId);

        //判断是否选中的是修改框框
        if (e.target.classList[1] === "bi-pen") {
            myModle.show()//开启弹窗

            // 省市县 处理
            await pCA("/api/province", {}, province)

            province.addEventListener("change", async () => {
                await pCA("/api/city", { pname: province.value }, city)
                await pCA("/api/area", { pname: province.value, cname: city.value }, area)
                // fuck()
            })

            //添加 市 的输入框变化事件---------------------------
            city.addEventListener("change", async () => {
                await pCA("/api/area", { pname: province.value, cname: city.value }, area)
            })

            document.querySelector('.modal-title').innerHTML = "修改学生信息";//修改拟态框文案
            //获取 修改学员的数据
            const modifyStu = await axios({
                url: `/students/${id}`,
                method: "get",
            })
            //返回 指定学生的信息 
            // 对指定学生的信息进行遍历
            for (const key in modifyStu.data.data) {
                if (document.querySelector(`[name=${key}]`) && modifyStu.data.data[key]) {
                    document.querySelector(`[name=${key}]`).value = modifyStu.data.data[key]
                };
            };
            modifyStu.data.data.gender = 1 ? document.querySelector(`#cb02`).checked = true : document.querySelector(`#cb01`).checked = true
            await pCA("/api/city", { pname: province.value }, city)
            city.value = modifyStu.data.data.city
            await pCA("/api/area", { pname: province.value, cname: city.value }, area)
            area.value = modifyStu.data.data.area
            // 快速拿到 form 表单里面的数据
            console.log("data", modifyStu.data.data);


            if (document.querySelector('.modal-title').innerHTML == "修改学生信息") {
                document.querySelector('#submit').onclick = async (e) => {
                    //---------
                    //获取form表单内所有元素
                    const data = serialize(document.querySelector('#form'), { hash: true })
                    //获取表单内所有元素的值 字符串方法拼接
                    for (const key in data) {//判断 是否是 能否转换成数字
                        if (!isNaN(+data[key])) {
                            data[key] = +data[key]
                        } else {
                            data[key] = data[key]
                        }
                    }
                    console.log(data);
                    // 向后台发送请求
                    await axios({
                        url: `/students/${id}`,
                        method: "put",
                        data
                    })
                    myModle.hide()//关闭拟态框
                    listDisplay()//刷新页面
                    form.reset()//重置表单
                };
            }
        }
    });
});